<div class="page">
    <h1>富文本编辑器 CKEditor</h1>
    <div class="line"></div>

    <h3>使用 CKEditor 开发扩展的自定义表单组件</h3>
    <p><a href="https://ckeditor.com/ckeditor-4/">CKEditor 官方文档</a></p>
    <h3>注意：使用 CKEditor 需要引入 CKEditor4 版本lib库</h3>
    <pre class="line-numbers"><code class="language-html">&lt;script src="./static/libs/ckeditor/ckeditor.js"&gt;&lt;/script&gt;</code></pre>
    <br>
    <p><span style="color:#FF5722">注：在数据渲染和使用时注意 '<' 和 '>' 的转义</span></p>
    <br>
    <div id="CKeditor"></div>
    <br>
    <button type="button" type="button" class="layui-btn layui-btn-normal" id="get">取值</button>
    <button type="button" type="button" class="layui-btn layui-btn-normal" id="set">赋值</button>
    <br>
    <pre class="line-numbers"><code class="language-js">// 使用方法
var Ckeditor = new icu.formElement.CKEditor();
// 渲染，开启CKEditor
this.$el.find('#CKeditor').append(Ckeditor.html);
// 由于 CKEditor 属于异步渲染组件，需要在创建变量后手动启动渲染方法
Ckeditor.render();

// 取值
this.$el.find('#get').click(() => {
    // 取值方法
    CKEditor.get(function (emsg, value) {
        icu.alert.normal({
            text: value
        });
    });
});

// 赋值
this.$el.find('#set').click(() => {
    // 赋值方法
    CKEditor.set('&lt;p&gt;&lt;strong&gt;asdasd&lt;/strong&gt;&lt;/p&gt;');
});
</code></pre>


</div>